<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="姓名" id="i1">
<input type="text" placeholder="工资" id="i2">
<input type="text" placeholder="岗位" id="i3">
<button onclick="addEmp()">添加员工</button>
<hr>
<!--<button onclick="addEmp()">员工工资</button>-->
<!--<button onclick="addEmp()">员工岗位</button>-->
<table border="1px">
    <caption>员工表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>岗位</th>
    </tr>
</table>
<script>
    //定义数组用来保存多个员工对象的值，后续可以将数组发给后端服务器
    let arr=[];
    function addEmp(){
        //获取用户输入的姓名、工资、岗位
        let uname=document.getElementById('i1').value.trim();
        let usalary=document.getElementById('i2').value.trim();
        let uJob=document.getElementById('i3').value.trim();
       //对数据进行校验
        if(!uname||!usalary||!uJob){
            alert('请输入完整信息');
            return;
        }
        console.log(uname,usalary,uJob)
        //每收集到一个员工数据，表格中就要多一个tr与三个td
        let trE=document.createElement('tr');
        let nameTD=document.createElement('td');
        let salaryTD=document.createElement('td');
        let JobTD=document.createElement('td');
        //将收集到的数据存入td
        nameTD.innerHTML=uname;
        salaryTD.innerHTML=usalary;
        JobTD.innerHTML=uJob;

        //将准备好的td添加到tr中
        trE.append(nameTD,salaryTD,JobTD);

        //获取表格元素，将准备好的tr添加到表格中
        let tableE=document.querySelector('table');
        tableE.append(trE);
        console.log(trE,nameTD,salaryTD,JobTD);

        //清空输入框的值
        document.getElementById('i1').value='';
        document.getElementById('i2').value='';
        document.getElementById('i3').value='';

        //将收集到的员工数据存入数组中
        arr.push({
            uname:uname,
            usalary:usalary,
            uJob:uJob
        });
        console.log(arr);
    }
</script>
</body>
</html>